<template>
	<view>
		<!-- 服务介绍 -->
		<view class="">
			<view class="bg-image">
				<!-- <view class="nav-left" style="" @click="goback"><image src="../../../static/left.png" mode="" style="width: 50rpx;height: 50rpx;"></image></view> -->
				<image :src="bgimage" mode="" style="width: 100%;height: 500rpx;"></image>
			</view>
			<u-navbar :title="title" autoBack placeholder :fixed="true" :bgColor="mybgcolor"></u-navbar>
			<view class="sangae">
				<view class="wrodsa">
					<view class="textleft"><image :src="smallImg" mode="" class="textleft"></image></view>
					<view class="textright">
						<text class="righttop">{{ smallname }}</text>
						<text class="rightbottom">{{ smallname }}</text>
					</view>
				</view>
				<view class="disag">
					<view class="Damoney">
						<text>￥{{ smallprice }}</text>
						<text
							style="color: #000; font-size: 25rpx;font-weight: 400;margin-left: 8rpx;"
							v-if="smallname == '月嫂服务' || smallname == '护工陪护' || smallname == '教育培训' || smallname == '产康服务'"
						>
							定金
						</text>

						<text style="color: #000; font-size: 25rpx;font-weight: 400;margin-left: 8rpx;" v-else>起/次</text>
					</view>
				</view>
				<view class="tips">{{ describe }}</view>
			</view>

			<!-- <view class="Acontent">
				<text @click="select(0)" :class="ind == 0 ? 'Acontent2' : ''">基本信息</text>
				<text @click="select(1)" :class="ind == 1 ? 'Acontent2' : ''">价格说明</text>
			</view> -->
			<view v-if="smallname == '社区上门服务'" class="Foot1" style="margin-top: 300rpx;">
				<view class="" style="display: flex;margin-bottom: 15rpx;">
					<view class="" style="width: 8rpx;height: 25rpx;background-color: #37c1c4;border-radius: 10rpx;margin-top: 10rpx;margin-right: 5rpx;"></view>
					<text>服务内容</text>
				</view>
				<image :src="service_notice" mode="" style="width: 610rpx;height: 630rpx;"></image>
			</view>
			<view v-else class="Foot1" style="margin-top: 180rpx;">
				<view class="" style="display: flex;margin-bottom: 15rpx;">
					<view class="" style="width: 8rpx;height: 25rpx;background-color: #37c1c4;border-radius: 10rpx;margin-top: 10rpx;margin-right: 5rpx;"></view>
					<text>服务内容</text>
				</view>
				<image :src="service_notice" mode="" style="width: 610rpx;height: 630rpx;"></image>
			</view>
			<view class="Foot">
				<view class="" style="display: flex;margin-bottom: 15rpx;">
					<view class="" style="width: 8rpx;height: 25rpx;background-color: #37c1c4;border-radius: 10rpx;margin-top: 10rpx;margin-right: 5rpx;"></view>
					<text>服务说明</text>
				</view>

				<!-- <image :src="service_notice" mode="widthFix" style="width: 610rpx;"></image> -->
				<image :src="service_notice_image" mode="widthFix" style="width: 610rpx;"></image>
			</view>
			<view class="footer_container">
				<view class="query_btn">
					<button open-type="contact" size="mini" style="padding: 0;margin:0;border-radius: 10rpx;"><view class="btn">联系客服</view></button>
				</view>
				<view class="pay_btn"><view @click="createOrder">立即下单</view></view>
			</view>
			<view class="footer_container" v-if="smallname == '教育培训'">
				<view class="query_btn1" style="margin-left:15%;">
					<button open-type="contact" size="" style="padding: 0;margin:0;border-radius: 10rpx;"><view class="btn">联系客服</view></button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { log } from 'util';
// const commonurl = this.https;
export default {
	data() {
		return {
			service: {},
			ind: 0,
			key1: '',
			bgimage: '',
			smallImg: '',
			smallname: '',
			smallprice: '',
			service_notice: '',
			describe: '',
			service_notice_image: '',
			title: '',
			mybgcolor: 'transparent'
		};
	},
	onLoad(e) {
		this.key1 = e.id;
		this.datail();
	},
	onShow() {
		this.service = uni.getStorageSync('Subpage');
		if(this.service){
			this.service.detail_content = this.https + this.service.service_detail_image;
		}
		// this.service.service_notice = commonurl + this.service.service_notice_image;
	},
	methods: {
		datail() {
			let self = this;

			this.get('/api/service/detail', { id: self.key1 }).then(res => {
				console.log(res);
				self.smallprice = res.common_price;
				self.smallname = res.name;
				self.bgimage = this.https + res.details_image;
				self.smallImg = res.logo;
				self.describe = res.describe;
				self.service_notice = this.https + res.service_detail_image;
				self.service_notice_image = this.https + res.service_notice_image;
			});
		},
		// 创建订单
		createOrder() {
			if (!uni.getStorageSync('user_id')) {
				uni.switchTab({
					url: '/pages/My/My'
				});
				return;
			}
			console.log(this.service.id, 'this.service.id');
			console.log(this.service, 'this.service');
			if (this.smallname == '孕检套餐') {
				uni.navigateTo({
					url: '/pages/HomePage/Aubordinate/Pregnancy?service_id=' + this.service.id + '&smallname=' + this.smallname + '&id=' + this.key1
				});
			} else if (this.smallname == '全程陪诊' || this.smallname == '代办跑腿' || this.smallname == '产康服务') {
				uni.navigateTo({
					url: '/pages/HomePage/Aubordinate/worker?service_id=' + this.service.id + '&smallname=' + this.smallname + '&id=' + this.key1
				});
			} else {
				uni.navigateTo({
					url: '/pages/HomePage/Aubordinate/order_buy?service_id=' + this.service.id + '&smallname=' + this.smallname + '&id=' + this.key1
				});
			}

			uni.setStorageSync('./fillin', this.service);
		},
		select(index) {
			this.ind = index;
		},
		goback() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			console.log(routes.length);
			if (routes.length <= 1) {
				this.gotoPage('/pages/index/index');
			} else {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss">
.left_T {
	width: 50rpx;
	height: 50rpx;
	margin-top: 50rpx;
	display: inline-block;
}

/* 底部 */
.agree {
	color: #ab68f7;
}

.bg-image {
	width: 100%;
	height: 300rpx;
	position: relative;
	.nav-left {
		position: fixed;
		left: 38rpx;
		top: 100rpx;
		z-index: 99;
	}
	image {
		width: 100%;
		height: 300rpx;
	}
}

.button {
	background-color: #5f5af7 !important;
	color: #ffffff !important;
	width: 600rpx;
	border-radius: 100rpx;
	margin-top: 10rpx;
}

.A_bottom {
	padding-top: 20rpx;
	width: 100%;
	height: 150rpx;
	margin-bottom: 0;
	background-color: #ffffff;
	bottom: 0;
	position: fixed;
	justify-content: center;
}

/* 卡片样式 */
.puper_a {
	margin-left: 80rpx;
}

.worder {
	height: 150rpx;
	margin: 30rpx;
	color: #424f5e;
	font-weight: 600;
	font-size: 30rpx;
}

.Foota {
	display: flex;
	height: 150rpx;
}
.Foot1 {
	width: 660rpx;
	margin-left: 50rpx;
	background-color: #fff;
	padding: 25rpx;
	box-sizing: border-box;
	border-radius: 14rpx;
	// margin-bottom: 300rpx;
}
.Foot {
	width: 660rpx;
	margin-left: 50rpx;
	background-color: #fff;
	padding: 25rpx;
	box-sizing: border-box;
	padding-bottom: 180rpx;
	margin-top: 25rpx;
	border-radius: 14rpx;
}

.pupera {
	width: 130rpx;
	height: 130rpx;
}

/* 服务内容样式 */
.Acontent {
	font-size: 35rpx;
	font-weight: 900;
	margin: 200rpx 40rpx 40rpx 60rpx;
	// margin-top: 140rpx;

	text:nth-child(2) {
		margin-left: 100rpx;
	}
}

.Acontent2 {
	font-size: 35rpx;
	font-weight: 900;
	color: #5f5af7;
}

/* 卡片样式 */
.Damoney {
	color: #24b9a3;
	font-weight: 700;
	font-size: 25rpx;

	text {
		font-size: 35rpx;
	}
}
.tips {
	font-size: 21rpx;
	font-weight: 400;
	margin-top: 15rpx;
}
.disag {
	margin-top: 30rpx;
	display: flex;
	position: relative;
	// top: 100rpx;
	// height: 100rpx;
	// line-height: 100rpx;
}

.deleo {
	text-decoration: line-through;
	font-size: 24rpx;
	color: #c4c4c4;
	margin-left: 50rpx;
	margin-top: 5rpx;
}

.sangae {
	background-color: #ffffff;
	width: 600rpx;
	margin-left: 50rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 300rpx;
}

.wrodsa {
	width: 620rpx;
	font-size: 25rpx;
	color: #424f5e;
	display: flex;
}
.textleft {
	width: 70rpx;
	height: 70rpx;
}
.textright {
	display: flex;
	flex-direction: column;
	margin-left: 25rpx;
}
.righttop {
	font-size: 28rpx;
	font-weight: 600;
}
.rightbottom {
	font-weight: 400;
}

/* 图片样式 */
.picture {
	width: 100%;
}

/* 顶部样式 */
.Top {
	display: flex;
	padding: 20rpx;
}

.Topone {
	width: 280rpx;
	text-align: left;
	font-size: 45rpx;
	font-weight: 900;
	margin-left: 50rpx;
}

.Toptwo {
	font-size: 35rpx;
	font-weight: 900;
	margin-left: -50rpx;
	margin-top: 55rpx;
}

.President {
	background-color: #f9f9f9;

	background-size: 750rpx 350rpx;
}

/* 背景图 */
.frameone {
	background-repeat: no-repeat !important;
	background-size: 100% 450rpx !important;
	width: 100% !important;
	height: 450rpx !important;
}

.footer_container {
	width: 750rpx;
	height: 160rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;

	.query_btn {
		width: 260rpx;
		height: 120rpx;
		margin: 20rpx 40rpx 0;
		.btn {
			width: 260rpx;
			height: 90rpx;
			background: #ffffff;
			border-radius: 10rpx;
			border: 2rpx solid #59d2b0;
			font-size: 32rpx;
			text-align: center;
			font-weight: 400;
			color: #59d2b0;
			line-height: 90rpx;
			text-align: center;
		}
	}
	.query_btn1 {
		width: 480rpx;
		height: 120rpx;
		margin: 20rpx 40rpx 0;
		.btn {
			width: 480rpx;
			height: 90rpx;
			background: #ffffff;
			border-radius: 10rpx;
			border: 2rpx solid #59d2b0;
			font-size: 32rpx;
			text-align: center;
			font-weight: 400;
			color: #59d2b0;
			line-height: 90rpx;
			text-align: center;
		}
	}

	.pay_btn {
		width: 400rpx;
		height: 120rpx;
		margin: 20rpx 40rpx 0 0;

		view {
			width: 370rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #59d2b0;
			font-size: 32rpx;
			text-align: center;
			border-radius: 10rpx;
			color: #ffffff;
		}
	}
}
</style>
